﻿body 
{
}

/******************Page Layout*********************/

/**************************************************************
*                                                               *
*                                                               *
                                                                *
                                                                *
                                                                *
                                                                *
                                                                *
                                                                *
**************************************************************/



#container
{
    height:900px;
    width:1500px;
    margin:0 auto;/*居中*/    
}

#header
{
    height:60px;
    width:inherit;
    background-color:#CDCDCD;
}

#mainBody
{
    height:830px;
    width:inherit;      
}

#bodyLeft
{
    width:750px;
    height:inherit;
    float:left;
    background-color:Orange;     
}

#bodyRight
{
    width:750px;
    height:inherit;
    float:left;    
}

#bodyLeft .h1
{    
    color:green;
    margin-top:415px;
    margin-left:325px;
}



/****************Tab Page************************/

/*
    把Tab头部和Tab内容区理解为两列数组，建立一对一映射关系。
    数列A：[1,2,3,4]
    数列B：[a,b,c,d]
    1-a, 2-b,  3-c, 4-d 
    可能性判断：
    初始化：1-a 显示，2-b,  3-c, 4-d 中的数列A显示，数列B不显示；
    【当】 事件触发【非】【初始化】映射  时，执行该映射关系的【动作】，并【修改】初始化值；
    【当】 事件触发 当前【初始化】映射 时，直接【return】跳过；
*/




*
{
    margin:0;
    padding:0;
    list-style-type:none;/*去掉<ul>和<li>前面的黑点*/
}



.box
{
    width:inherit;
    margin:0 auto 0;
    background:#ccc;
}

.tab_menu
{
    overflow:hidden;
    height:30px;
}

.tab_menu li
{
    width:80px;
    float:left;
    height:30px;
    background:#093;
    text-align:center;
    /*
    line-height 属性设置行间的距离（行高）。
    该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。
    line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。
    可以包含这些内容的最小框就是行框。
    */
    line-height:30px;
}

/*
    写这里的样式时注意：
    1.  li.current相当于li[class="current"]
    2.  加了空格表示的是他的后代,current样式无效
    3.  li .current如果有空格 那么 这个样式就会应用到li的后代元素中含有current这个类的元素  
        如果不加空格就会应用到含有current这个类的li元素上
*/
.tab_menu li.current
{
    color:#333;
    background:#fff;  
}

.tab_box
{
    padding:20px;
    width:500px;
}

.tab_box li
{
    height:25px;
    line-height:25px;
    overflow:hidden;    
}

.tab_box .hide
{
    /*
    none 此元素不会被显示。 
    block 此元素将显示为块级元素，此元素前后会带有换行符。 
    inline 默认。此元素会被显示为内联元素，元素前后没有换行符。 
    */
    display:none;
}










